<template>
	<view class="content">
		<!-- <StatusBar /> -->
		<NavBar />

		<Card :source="cardSource[index]" :index="index" />

		<swiper class="swiper">
			<swiper-item v-for="gar in curPage.content">
				<view :class="['swiper-inner', 'uni-bg-red',colorNames2[index]]">
					<view class="title bold fs-24">
						{{gar.name}}
					</view>
					<view class="desc1 color-3" v-if="gar.desc1">
						{{gar.desc1}}
					</view>
					<view class="bold">
						实物举例
					</view>
					<view class="desc2 color-3">
						{{gar.desc2}}
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import StatusBar from '@/components/StatusBar.vue'
	import NavBar from '@/components/NavBar.vue'
	import Card from '@/components/Card.vue'
	import garbages from './garbages.js'
	export default {
		data() {
			return {
				garbages: garbages,
				index: 0,
				colorNames2: ["light-green", "light-red", "light-brown", "light-blue"],
				cardSource: [{
						title: "干垃圾",
						desc: "即其它垃圾，指除可回收物、有害垃圾、湿垃圾以外的其它生活废弃物。",
						icon: "../static/gan.png"
					},
					{
						title: "有害垃圾",
						desc: "对人体健康或者自然环境造成直接或潜在危害的生活废弃物。",
						icon: "../static/youhai.png"
					},
					{
						title: "湿垃圾",
						desc: "易腐的生物质生活废弃物。（本类别中列举物品均包含食用前、后物态）",
						icon: "../static/shi.png"
					},
					{
						title: "可回收物",
						desc: "宜循环，可循环利用的生活废弃物。",
						icon: "../static/huishou.png"
					}
				]
			}
		},
		components: {
			StatusBar,
			Card,
			NavBar
		},
		onLoad(option) {

			if (option.index && option.index >= 0 && option.index < 4) {
				this.index = option.index
			}

		},
		computed: {
			contents() {
				return this.garbages[this.index]
			},
			curPage() {
				return this.garbages[this.index]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		// padding: 0 52rpx;
		height: 100%;
	}

	.swiper {
		min-height: 1100rpx;
		margin-top: 30rpx;
	}

	swiper-item {
		width: 616rpx;
		box-sizing: border-box;
		padding: 0 60rpx;

	}

	.swiper-inner {
		height: 1000rpx;
		// background-color: #DFEFFF;
		border: solid 5px black;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 60rpx;
		font-size: 36rpx;
	}
</style>